<template>
  <view>
    <view class="card">
      <uni-section title="单位基本信息" type="line">
        <view class="formItem">
          <view class="label">单位名称</view>
          <input class="content" v-model="form.name" @blur="judgCompanyName" placeholder="请输入单位名称" />
        </view>

        <view class="formItem">
          <view class="label">统一社会信用代码</view>
          <input class="content" v-model="form.code" @blur="judgCompanyCode" placeholder="请输入统一社会信用代码" />
        </view>

        <view class="formItem">
          <view class="label">机构地址</view>
          <input class="content" v-model="form.address" placeholder="请输入机构地址" />
        </view>

        <view class="formItem" v-if="show">
          <view class="label">营业执照注册地区</view>
          <view :style="{ color: form.areas ? '#333' : '#999' }" @click="openLevel">{{ form.areas || '请选择所在区域' }}</view>
          <level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData"
            @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>
        </view>

        <view class="formItem">
          <view class="label">单位联系人</view>
          <input class="content" v-model="form.companyName" placeholder="请输入单位联系人" />
        </view>

        <view class="formItem">
          <view class="label">联系人联系方式</view>
          <input class="content" v-model="form.companyPhone" placeholder="请输入联系人联系方式" @blur="checkPhone()" />
        </view>

        <view class="formItem_doubleRow" style="height: 170rpx;">
          <view class="label">请选择消防技术服务活动类别</view>
          <uni-data-checkbox :multiple="true" v-model="form.serviceType" :value="form.serviceType"
            :localdata="serviceTypeList"></uni-data-checkbox>
        </view>

        <view class="formItem_doubleRow">
          <view class="label">营业执照</view>
          <upload-img :imgList="imageValue" @changeImage="uploadSuccess($event)"></upload-img>
        </view>
      </uni-section>
    </view>

  </view>
</template>
<script>
import {
  baseImgUrl,
  baseApiUrl
} from '@/config.js';
import UploadImg from '../../../components/upload/upload-img.vue';
import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
import { checkPhoneTools } from '@/utils/tools.js'
export default {
  components: {
    UploadImg,
    levelLinkage
  },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      baseApiUrl: baseApiUrl,
      imageValue: [],
      form: {
        name: '', // 单位名称
        code: '', // 统一社会信用代码
        address: '', // 机构地址
        areas: "", // 所在区域（中文）
        area: '', // 营业执照注册地区
        serviceType: '', // 服务类型
        companyName: '', // 单位联系人
        companyPhone: '', // 联系人联系方式
        businessLicense: '', // 营业执照
      },
      // 服务类型
      serviceTypeList: [{
        text: '维护保养检测',
        value: '1'
      },
      {
        text: '消防安全评估',
        value: '2'
      }
      ],
      pickerValueDefault: [0, 0, 0],
      treeData: [], // 所属区域
      show: false,
    }
  },
  watch: {
    '$store.state.login.form.image': {
      handler(val) {
        if (!val == '') {
          this.form.image = val
        }
      },
      deep: true,
      immediate: true
    },
  },
  created() {
    this.getTreelists()
  },
  methods: {
    getTreelists() {
      this.$store.dispatch('getAreaTreeApi').then(res => {
        if (res.length != 0) {
          this.treeData = res.data
          this.show = true
        }
      })
    },
    // 手机号校验
    checkPhone() {
      return checkPhoneTools(this.form.companyPhone, "请输入正确的手机号")
    },

    // 上传成功回调函数
    uploadSuccess(e) {
      this.form.businessLicense = e.join(',')
    },

    //! 提供给父组件的校验方法，错误时返回表单名
    validateForm() {
      let result = true
      // 再校验一遍电话号码、公司信用代码、公司名称
      if (this.checkPhone() && this.judgCompanyCode() && this.judgCompanyName()) {
        // 如果表单字段为空时则返回校验失败
        for (const key in this.form) {
          if (this.form[key] === '') {
            result = '单位信息、'
            break
          }
        }
      } else {
        result = '单位信息、'
      }

      return result
    },
    // 针对单位名称与统一信用代码的失去焦点事件做请求
    judgCompanyCode() {
      let result = true
      let that = this
      const reg = /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/;
      if (!reg.test(this.form.code)) {
        that.errorTip('统一信用代码有误')
        result = false
        return
      }

      if (this.form.name && this.form.code && this.form.area) {
        let dist = {
          name: this.form.name,
          code: this.form.code,
          area: this.form.area
        }

        this.$store.dispatch('getCreditCode', dist).then(res => {
          if (res.code != 200) {
            that.errorTip(res.msg)
            result = false
          }
        })
      }

      return result
    },
    // 校验公司名称
    judgCompanyName() {
      let result = true
      let that = this

      if (this.form.name && this.form.code) {
        let dist = {
          name: this.form.name,
          code: this.form.code,
          area: this.form.area
        }

        this.$store.dispatch('getCreditCode', dist).then(res => {
          if (res.code != 200) {
            that.errorTip(res.msg)
            result = false
          } else {
            result = true
          }
        })
      }

      return result
    },
    openLevel() {
      this.$refs.levelLinkage.open();
    },
    onConfirm(e) {
      // e 确认后选中的数据
      this.form.areas = e.name
      this.form.area = e.thirdPick.parentId
      this.judgCompanyCode()
    },

    // 返回一个弹窗
    errorTip(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
      });
    }
  }
}
</script>
